<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>首页</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div class="container">
 
  <header class="home-head">
     <em class="search"> <input type="text"  placeholder="5号食堂-牛肉拉面" alt="5号食堂-牛肉拉面" name="mobile"> </em>
  </header>
  
 
  <nav class="nav">
    <ul>
       <a href="index.html" class="act"> <li> 菜单 </li> </a>
       <a href="canteen-comment.html"> <li>评价</li> </a>
       <a href="canteen.html"> <li>简介</li> </a>
    </ul>
  </nav>
  
  <div id="notice" class="notice">食堂营业时间是06：00——18：00</div>
  
  <p class="blank-index"></p>
 
  <section class="menu">
    <aside class="menu-left">
     <ul>
       <li class="act" data-id="0">湘菜系列<i>0</i></li> 
       <li data-id="1">西餐系列<i>0</i></li>
       <li data-id="2">粤菜系列<i>0</i></li>
       <li data-id="3">满汉全席<i>0</i></li> 
       <li data-id="4">糖醋鱼<i>0</i></li>
       <li data-id="5">太极白玉翡翠羹<i>0</i></li>
       <li data-id="6">淮扬狮子头<i>0</i></li>
       <li data-id="7">粤菜系列<i>0</i></li>
       <li data-id="8">盐水鸭<i>0</i></li> 
       <li data-id="9">冷饮糕点<i>0</i></li>
       <li data-id="10">糖醋鱼<i>0</i></li>
       <li data-id="11">粤菜系列<i>0</i></li>
       <li data-id="12">粤菜系列<i>0</i></li>
       <li data-id="13">满汉全席<i>0</i></li> 
       </ul>
    </aside>
     
    <div class="menu-right">
    
       <ul data-ul="0">      
         <li class="menu-list" data-dish="darp0">
           <div class="list-left">
              <h1>11111肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥<span>26.00</span></h2>
           </div>
           <div class="list-right">
             <p class="list-img"><img class="img-details" src="img/img1.jpg"></p>
             <div class="list-num"> 
               <i class="dell"><img src="img/dell.png"></i>
               <span class="number">0</span>  
               <i class="add"><img src="img/add.png"></i>
             </div> 
           </div>           
         </li> 
        
          <li class="menu-list" data-dish="darp1">
           <div class="list-left">
              <h1>fsadfasfasdfs</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥<span>38.00</span></h2>
           </div>
           <div class="list-right">
             <p class="list-img"><img class="img-details" src="img/img1.jpg"></p>
             <div class="list-num"> 
               <i class="dell"><img src="img/dell.png"></i>
               <span class="number">0</span>  
               <i class="add"><img src="img/add.png"></i>
             </div> 
           </div>           
         </li> 
 
          <li class="menu-list" data-dish="darp2">
           <div class="list-left">
              <h1>fsadfasfasdfs</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥<span>38.00</span></h2>
           </div>
           <div class="list-right">
             <p class="list-img"><img class="img-details" src="img/img1.jpg"></p>
             <div class="list-num"> 
               <i class="dell"><img src="img/dell.png"></i>
               <span class="number">0</span>  
               <i class="add"><img src="img/add.png"></i>
             </div> 
           </div>           
         </li> 
        
          <li class="menu-list" data-dish="darp3">
           <div class="list-left">
              <h1>fsadfasfasdfs</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥<span>38.00</span></h2>
           </div>
           <div class="list-right">
             <p class="list-img"><img class="img-details" src="img/img1.jpg"></p>
             <div class="list-num"> 
               <i class="dell"><img src="img/dell.png"></i>
               <span class="number">0</span>  
               <i class="add"><img src="img/add.png"></i>
             </div> 
           </div>           
         </li> 
         
          <li class="menu-list" data-dish="darp4">
           <div class="list-left">
              <h1>fsadfasfasdfs</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥<span>38.00</span></h2>
           </div>
           <div class="list-right">
             <p class="list-img"><img class="img-details" src="img/img1.jpg"></p>
             <div class="list-num"> 
               <i class="dell"><img src="img/dell.png"></i>
               <span class="number">0</span>  
               <i class="add"><img src="img/add.png"></i>
             </div> 
           </div>           
         </li> 
     </ul>
     
      <ul data-ul="1">      
          <li class="menu-list" data-dish="darp5">
           <div class="list-left">
              <h1>fsadfasfasdfs</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥<span>38.00</span></h2>
           </div>
           <div class="list-right">
             <p class="list-img"><img class="img-details" src="img/img1.jpg"></p>
             <div class="list-num"> 
               <i class="dell"><img src="img/dell.png"></i>
               <span class="number">0</span>  
               <i class="add"><img src="img/add.png"></i>
             </div> 
           </div>           
         </li> 
        
          <li class="menu-list" data-dish="darp6">
           <div class="list-left">
              <h1>fsadfasfasdfs</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥<span>38.00</span></h2>
           </div>
           <div class="list-right">
             <p class="list-img"><img class="img-details" src="img/img1.jpg"></p>
             <div class="list-num"> 
               <i class="dell"><img src="img/dell.png"></i>
               <span class="number">0</span>  
               <i class="add"><img src="img/add.png"></i>
             </div> 
           </div>           
         </li>     
     </ul>
 
     <ul data-ul="2">      
         <li class="menu-list">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li> 
        
         <li class="menu-list act">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li>          
     </ul>
     
     <ul data-ul="3">      
         <li class="menu-list">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li> 
     </ul>
     
     <ul>      
         <li class="menu-list">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li> 
     </ul>

     <ul>      
         <li class="menu-list">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li> 
     </ul>
     
     <ul>      
         <li class="menu-list">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li> 
     </ul>


     <ul>      
         <li class="menu-list">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li> 
     </ul>
     
     <ul>      
         <li class="menu-list">
           <div class="list-left">
              <h1>333肚面面羊肚面羊肚面</h1>
              <p>月售:<i>1222</i>份</p>
              <h2>￥26.00</h2>
           </div>
           <div class="list-right">
             <p><img src="img/img6.jpg"></p>
           </div>
         </li> 
     </ul>
     
    </div>
  </section>
   
  <footer>    
   <div class="index-bottom">
    <div class="index-bottom-left"> 
      <img id="back" src="img/back.png"> 
    </div>
    <div class="index-bottom-center"> 
       <span> <img id="icon-shop" src="img/icon-shop.png">  <i class="shop-num" id="shop-num"> 1 </i> </span> 
       <i>￥<span>00</span></i>    
    </div>
    <div id="next-step" class="index-bottom-right"> <a href="takeaway-canteen-orde-rconfirm.html">下一步</a> </div> 
   </div> 
 </footer>   


  <!--菜单图片详情页 弹出层 开始 -->
  <section class="mark" id="mark">
     <div class="mark-text">
         <span class="close" id="close">×</span>
         <img src="img/img1.jpg"> 
         <div class="mark-left"> 
           <p class="title"></p>
           <p class="sale">月售:<i></i>份</p>
           <p class="price">￥<span></span></p>
         </div>
          <div class="mark-right"> 
            <i class="dell"><img src="img/dell.png"></i>
            <span class="number">1</span>  
            <i class="add"><img src="img/add.png"></i>
          </div>
     </div>
  </section>
 <!--菜单图片详情页 弹出层 结束 -->


  <!--系统通知 详情页面弹出层 开始 -->
   <section class="mark" id="notice-details">
    <ul class="notice-details">
    <span class="close" id="notice-close">×</span>
      食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营0——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食营0——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营业时间是06：00——18：00食堂营时间是06：00——18：00食堂营业时间是06：00——18：00
    </ul>
  </section>
  </section>
 <!--系统通知 详情页面弹出层 end  -->



 <!-- 点击下一步 购物车没有订单 弹出层 开始 -->
  <section class="mark" id="prompt">
    <ul class="prompt">
      <p class="word1">提示</p>
      <p class="word2">购物篮没有菜品喔，请先选些菜吧！</p>    
      <p id="ensure" class="word3">确定</p> 
    <ul>
  </section>
 <!-- 点击下一步 购物车没有订单 弹出层 结束 -->


  <!--点击购物车结算 弹出遮罩层 开始-->
    <section id="shop-mark" class="shop-mark">
       <div class="shop-mask"></div>
       <ul class="shop-cart">
         <p><span>购物车</span> <i><a class="clearcart">清空全部</a></i></p>
         <br> <br> <br>
         
<!--          <li data-dish="darp0">
           <div class="shop-cart-left"> 鱼香肉丝</div>
           <div class="shop-cart-center"> ￥<span>226.00</span></div>
           <div class="shop-cart-right"> 
             <i class="dell"><img src="img/dell.png"></i>
             <span class="number">2</span>  
             <i class="add"><img src="img/add.png"></i>
           </div>
         </li>

          <li>
           <div class="shop-cart-left"> 鱼香肉丝</div>
           <div class="shop-cart-center"> ￥226.00</div>
           <div class="shop-cart-right"> 
             <i class="dell"><img src="img/dell.png"></i>
             <span class="number">2</span>  
             <i class="add"><img src="img/add.png"></i>
           </div>
         </li>
         
         <li>
           <div class="shop-cart-left"> 鱼香肉丝</div>
           <div class="shop-cart-center"> ￥226.00</div>
           <div class="shop-cart-right"> 
             <i class="dell"><img src="img/dell.png"></i>
             <span class="number">2</span>  
             <i class="add"><img src="img/add.png"></i>
           </div>
         </li>
 
         <li>
           <div class="shop-cart-left"> 鱼香肉丝</div>
           <div class="shop-cart-center"> ￥226.00</div>
           <div class="shop-cart-right"> 
             <i class="dell"><img src="img/dell.png"></i>
             <span class="number">2</span>  
             <i class="add"><img src="img/add.png"></i>
           </div>
         </li> -->
       </ul>
    </section>
   <!--点击购物车结算 弹出遮罩层 end-->
 
</div>

<script type="text/javascript" src="js/jQuery.js"></script> <!--调用 jQuery特效-->
<script type="text/javascript" src="js/main.js"></script> <!--主页面 js特效-->
<script type="text/javascript" src="js/swipe.js"></script> <!--幻灯片 js特效-->
</body>
</html>